<template>
  <div>
      <h3>发表评论</h3>
      <textarea name="" id="" placeholder="请输入巴巴的内容，最多120字" maxlength="120" rows="5" v-model="msg"></textarea>
      <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
      <div class="com-list">
         <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time"><!-- 由于发表评论人数多所以这里控制台会报错，其实是由于v-for中的key值人们在提交评论的时候是在同一时间提交的所以才会报错 -->
             <div class="cmt-title">
                 第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}
            </div>
            <div class="cmt-content">
                 {{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }}
             </div>
        </div>
      <mt-button type="danger" size="large" @click="more">加载更多</mt-button>
     </div>
  </div>

</template>

<script>
import { Toast } from 'mint-ui';
import { Button } from 'mint-ui';
export default {
    data(){
        return{
            pageIndex:1,///默认第一页
            comments:[],///服务求数据
             msg:'',///评论内容
             id:this.$route.params.id
        }
    },
    created(){
        this.getComments()
    },
    methods:{
        getComments(){//拼接当前页码
            this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then(res=>{
                if(res.body.status === 0)
                {
                    this.comments = this.comments.concat(res.body.message)
                    console.log('评论ok')
                }else{
                    Toast('评论加载失败')
                }

            })
        },
        more(){///加载更多
            this.pageIndex++
            this.getComments();

        },
        postComment(){
           ///提交评论
           if(this.msg.length == 0){
               Toast("评论不能为空！！！")
           }
            this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.$route.params.id,
            {content:this.msg.trim()}).then(res=>{
                if(res.body.status === 0)
                {   
                    ///这时没有用户数据，需要手动拼接出一个对象
                    let cmt={
                        user_name:'cc',
                        add_time:Date.now(),
                        content:this.msg.trim()
                    }
                    this.comments.unshift(cmt);
                    this.msg = '';

                }else{
                    Toast('提交失败')
                }
            })
        }

    }

}
</script>

<style scoped>
h3{
    text-align: center;
}
textarea{
    margin-bottom: 2px;
    font-size:12px;
}
.com-list{
    margin: 5px 0;
}
.com-item{
    font-size: 13px;
}
.cmt-title{
    line-height: 30px;
    background-color: #ccc;
    font-size: 13px;
}
.cmt-body{
    line-height: 35px;
    text-indent: 2em;
}
body{
    font-size: 12px;
}
.cmt-content{
    font-size: 12px;
}
</style>